<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .one{
        width:200px;
        height: 100px;
        background-color: aqua;
        margin: 50px 300px;
    }
    .one:hover{
        transition-property: all;
        transition-timing-function: ease-in-out;
        transition-duration: 5s;
        transform: rotateX(180deg);
    }
    .two{
        display: inline-block;
        width:200px;
        height: 100px;
        background-color: aqua;
        position: relative;
        top: -800PX;
        left: 600px;
        
    }
    .two:hover{
        transition-property: all;
        transition-timing-function: ease-in-out;
        transition-duration: 5s;
        transform: rotateY(180deg);
        transform-style:preserve-3d;
    }
    .two:visited{
        transform-style:preserve-3d;
    }
    .three{
        display: inline-block;
        width:200px;
        height: 100px;
        background-color: aqua;
        position: relative;
        top: -800px;
        left: 700px;
    }
    .three:hover{
        transition-property: all;
        transition-timing-function: ease-in-out;
        transition-duration: 5s;
        transform: rotate3d(0,1,1,180deg);
    }
   .love{
    width: 1420px;
    height: 100px;
    border: 2px solid;
    margin-top:100px;
    padding-top: -10px;
    perspective: 150px;
   }
   .for{
    width: 400px;
    height: 300px;
    position: relative;
    margin: 800px auto;
   }
   .hope,.hehe{
    width: 400px;
    height: 300px;
    backface-visibility: hidden;
    position:absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    line-height: 300px;
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-duration: 1s;

   }
   .hope{
    background-color: rgb(167, 196, 38);
    transform: rotateY(0deg);
    backface-visibility: visible;
   }
   .hehe{
    background-color: aqua;
   /* backface-visibility: hidden; 与下处同理*/
   
   }
   .hope:hover{
    transform: rotateY(-180deg);
    
   }
   .hehe:hover{
    transform: rotateY(-180deg);
   }
   div{
    width: 400px;
    height: 450px;
    position: relative;
    margin: 600px auto;
    perspective: 450px;
   }
   img{
    width: 400px;
    height: 450px;
    margin: 500px auto;
   backface-visibility: hidden;
    transition: all 1s ease-in-out 0s;
    position:absolute;
    top: -600px;
    left: 0px;
   }
   .wuwu{
    backface-visibility:visible;用于保证2图仍然是可见的，防止翻转后图二消失
   }
.wawa{
    
    transform: rotateY(0deg);//若为180deg定义2图片在背面，0deg右转为正，过180deg后为负
}
div:hover .wawa{
    transform: rotateY(-180deg);//若为0deg定义图片在正面0deg上
}
div:hover .wuwu{
    transform: rotateY(-180deg);//若为-180使图片2从正面转向180deg。
}
  
 
</style>
<body>
 <div class="love">
  <div class="one">你好</div>
  <div class="two">思恋</div>
  <div class="three">无声</div>
</div>
<div class="for">
<div class="hope">震耳欲聋</div>
<div class="hehe">祈祷</div>
</div>
<div class="haha">
    <img src="imag/OIP-C (2).jfif" alt="" class="wuwu">
    <img src="imag/OIP-C (4).jfif" alt="" class="wawa">
</div>
做图片和装满背景盒子(无图)绕y轴翻转效果要点
/*首先先是将n张图片放于大盒子装起来，然后给大盒子设置宽高，添加3d变形与定位，在子元素中统一设置宽高加定位使两图片重合，
增添过渡效果与backface-visibility 中不可见，在单挑出翻转后出现的图片或动画子元素增添 backface-visibility:visible;用于保证2图仍然是可见的，
防止翻转后图二消失，再设置每个子元素中图片悬停时翻转效果，角度自己找，一般是背面原翻转0deg，悬停后正反面都转-180deg。或按书上的不给背面加visible，
直接设置背面为180deg，悬停后背面为0deg，正面为-180deg（这个装满背景的盒子翻转用起来不像翻转）
</body>
</html>